<template>
  <div class="home" @scroll="scroll">
    <cols-header class="border top" v-show="show"></cols-header>
    <!-- <my-input v-model="content" type="text" placeholder="请输入账号" @input="fn"></my-input> -->
    <!-- <my-button type="primary">点击</my-button>
    <my-button type="danger">删除</my-button>
    <my-button type="warn">编辑</my-button>
    <my-button>保存</my-button> -->

    <!-- 首页 -->
    <div class="wrapper">
      <div class="swiper">
        <!-- 首页轮播图 -->
        <my-swiper :banners="banners"></my-swiper>
      </div>
      <!-- 首页导航 -->
      <my-main class="my-main" :tab="arr"></my-main>
    </div>

    <my-product title="全民砍价 >"></my-product>
    <commodity :list="list"></commodity>

    <my-product title="精选专题 >"></my-product>
    <my-carousel></my-carousel>

    <my-product title="人气推荐 >"></my-product>
    <my-page></my-page>

    <!-- /首页 -->

    <div class="main"></div>
  </div>
</template>

<script>
import myPage from "@/components/myPage/myPage";
import myCarousel from "@/components/myCarousel/myCarousel";
import commodity from "@/components/commodity/commodity";
import myProduct from "@/components/myProduct/myProduct";
import tab from "@/components/tab/tab";
import myInput from "@/components/myinput/myinput";
import colsHeader from "@/components/colsHeader/colsHeader";
import { Carousel, Pice, categoryall } from "../../utils/api";
import myButton from "@/components/mybutton/mybutton";
import mySwiper from "@/components/mySwiper/mySwiper";
export default {
  name: "Home",
  components: {
    colsHeader,
    myInput,
    myButton,
    mySwiper,
    myMain: tab,
    myProduct,
    commodity,
    myCarousel,
    myPage,
  },
  data() {
    return {
      show: false,
      content: "",
      banners: [],
      type: "",
      arr: [
        { name: "签到", icon: "iconfont icon-qiandao" },
        { name: "礼券", icon: "iconfont icon-liquan" },
        { name: "砍价", icon: "iconfont icon-kanjia" },
        { name: "专栏", icon: "iconfont icon-zhuanlan" },
      ],
      list: {},
    };
  },
  methods: {
    scroll(e) {
      // console.log(e.target.scrollTop)
      this.show = e.target.scrollTop > 400 ? true : false;
    },
  },
  created() {
    this.$loading.show("拼命加载中...");
    Carousel().then((res) => {
      this.banners = res;
      this.$loading.hide();
    });
    Pice().then((res) => {
      this.list = res.data[9];
      console.log(this.list);
    });
  },
};
</script>
<style lang="scss" scoped>
.home {
  height: calc(100% + 1rem);
  overflow: auto;
  .main {
    height: 2rem;
    // background-image: linear-gradient(red, blue, yellow, green);
  }
  .top {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
  }
  .wrapper {
    width: 100%;
    position: relative;

    .swiper {
      position: relative;
      overflow: hidden;
      cursor: grab;
      -webkit-user-select: none;
      user-select: none;
    }
    .my-main {
      width: 100%;
      height: 1rem;
      margin-top: -30%;
      font-size: 0.8rem;
      border-radius: 20% 20% 0 0;
      border-bottom: 0.2rem solid #f5f5f5;
      position: absolute;
      background-color: white;
    }
  }
  #tab[data-v-9c4fe28a] {
    width: 100%;
    height: 2.5rem;
  }
  /deep/ {
    [data-v-9c4fe28a] .iconfont {
      font-size: 0.5rem;
    }
    #tab ul li[data-v-9c4fe28a] {
      font-size: 0.5rem;
    }
    #tab ul li[data-v-9c4fe28a] {
      width: 100%;
      height: 100%;
    }
    [data-v-9c4fe28a] .iconfont {
      height: 50px;
    }
  }
}
</style>
